// 기존 방식 (모든 코드를 한 번에 로드)
import { heavyFunction } from "./heavyModule";

function handleClick() {
  heavyFunction();
}

// 최적화 방식 (필요할 때만 동적 import)
function handleClick() {
  import("./heavyModule").then((module) => {
    module.heavyFunction();
  });
}

// main.js (메인 스레드)
const worker = new Worker("worker.js");

// 무거운 작업을 워커에 위임
document.querySelector("#calculate-btn").addEventListener("click", () => {
  const data = { numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] };
  worker.postMessage(data);
});

// 워커로부터 결과 받기
worker.onmessage = function (e) {
  document.querySelector("#result").textContent = e.data.result;
};

// worker.js (별도 스레드)
self.onmessage = function (e) {
  const numbers = e.data.numbers;

  // 무거운 계산 수행
  const result = heavyCalculation(numbers);

  // 결과를 메인 스레드로 반환
  self.postMessage({ result });
};

function heavyCalculation(numbers) {
  // 시간이 많이 소요되는 계산...
  return numbers.reduce((sum, num) => sum + Math.pow(num, 2), 0);
}

// 기존 코드 (스크롤 이벤트마다 실행)
window.addEventListener("scroll", function () {
  updateElementsPosition();
});

// 최적화 코드 (스로틀링 적용)
function throttle(func, limit) {
  let inThrottle;
  return function () {
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

window.addEventListener(
  "scroll",
  throttle(function () {
    updateElementsPosition();
  }, 100)
); // 100ms마다 최대 1번만 실행

// 비효율적인 방식 (각 변경 후 레이아웃 재계산 발생)
function updateBoxes(items) {
  const container = document.getElementById("container");

  for (let i = 0; i < items.length; i++) {
    const div = document.createElement("div");
    div.className = "box";
    div.textContent = items[i].name;
    container.appendChild(div); // 매번 DOM이 업데이트됨

    // 이 시점에서 레이아웃 재계산이 발생할 수 있음
    console.log(div.offsetHeight); // 레이아웃 강제 발생
  }
}

// 최적화 방식 (DocumentFragment 사용)
function updateBoxesOptimized(items) {
  const fragment = document.createDocumentFragment();
  const measurements = [];

  for (let i = 0; i < items.length; i++) {
    const div = document.createElement("div");
    div.className = "box";
    div.textContent = items[i].name;
    fragment.appendChild(div);
  }

  // 한 번에 DOM에 추가
  document.getElementById("container").appendChild(fragment);

  // 읽기 작업은 쓰기 작업 이후에 모아서 처리
  const boxes = document.querySelectorAll(".box");
  for (let i = 0; i < boxes.length; i++) {
    measurements.push(boxes[i].offsetHeight);
  }
}

/* 비효율적인 방식 (레이아웃 재계산을 유발) */
.box-inefficient {
  animation: move-inefficient 1s ease infinite;
}

@keyframes move-inefficient {
  0% {
    left: 0;
    top: 0;
  }
  50% {
    left: 100px;
    top: 100px;
  }
  100% {
    left: 0;
    top: 0;
  }
}

/* 최적화 방식 (GPU 가속 활용) */
.box-optimized {
  animation: move-optimized 1s ease infinite;
}

@keyframes move-optimized {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(100px, 100px);
  }
  100% {
    transform: translate(0, 0);
  }
}

<!-- 기본적인 방식 (모든 기기에 동일한 대형 이미지 제공) -->
<img src="large-image.jpg" alt="풍경 이미지" />

<!-- 최적화 방식 (반응형 이미지) -->
<img
  src="small-image.jpg"
  srcset="small-image.jpg 400w, medium-image.jpg 800w, large-image.jpg 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1000px) 800px,
         1200px"
  alt="풍경 이미지"
/>

<!-- 최신 이미지 포맷 지원 -->
<picture>
  <!-- AVIF 포맷 지원 브라우저용 -->
  <source srcset="image.avif" type="image/avif" />
  <!-- WebP 포맷 지원 브라우저용 -->
  <source srcset="image.webp" type="image/webp" />
  <!-- 폴백 이미지 -->
  <img src="image.jpg" alt="풍경 이미지" />
</picture>

<!-- 네이티브 레이지 로딩 -->
<img src="image.jpg" loading="lazy" alt="풍경 이미지" />

<!-- 인터섹션 옵저버를 이용한 레이지 로딩 -->
<img data-src="image.jpg" class="lazy" alt="풍경 이미지" />

// 인터섹션 옵저버를 활용한 레이지 로딩 구현
document.addEventListener("DOMContentLoaded", function () {
  const lazyImages = document.querySelectorAll("img.lazy");

  if ("IntersectionObserver" in window) {
    const imageObserver = new IntersectionObserver(function (
      entries,
      observer
    ) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          const image = entry.target;
          image.src = image.dataset.src;
          image.classList.remove("lazy");
          imageObserver.unobserve(image);
        }
      });
    });

    lazyImages.forEach(function (image) {
      imageObserver.observe(image);
    });
  } else {
    // 폴백 - 인터섹션 옵저버를 지원하지 않는 브라우저용
    let lazyLoadThrottleTimeout;

    function lazyLoad() {
      if (lazyLoadThrottleTimeout) {
        clearTimeout(lazyLoadThrottleTimeout);
      }

      lazyLoadThrottleTimeout = setTimeout(function () {
        const scrollTop = window.pageYOffset;

        lazyImages.forEach(function (img) {
          if (img.offsetTop < window.innerHeight + scrollTop) {
            img.src = img.dataset.src;
            img.classList.remove("lazy");
          }
        });

        if (lazyImages.length == 0) {
          document.removeEventListener("scroll", lazyLoad);
          window.removeEventListener("resize", lazyLoad);
        }
      }, 20);
    }

    document.addEventListener("scroll", lazyLoad);
    window.addEventListener("resize", lazyLoad);
  }
});

<!DOCTYPE html>
<html>
  <head>
    <title>성능 최적화 페이지</title>

    <!-- 중요 CSS를 인라인으로 포함 -->
    <style>
      /* 첫 화면에 필요한 중요 스타일만 인라인으로 포함 */
      body {
        margin: 0;
        font-family: sans-serif;
        color: #333;
      }
      .header {
        background-color: #f8f8f8;
        padding: 20px;
      }
      .hero {
        height: 80vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>

    <!-- 나머지 CSS는 비동기로 로드 -->
    <link
      rel="preload"
      href="styles.css"
      as="style"
      onload="this.onload=null;this.rel='stylesheet'"
    />
    <noscript><link rel="stylesheet" href="styles.css" /></noscript>
  </head>
  <body>
    <header class="header">...</header>
    <section class="hero">...</section>
  </body>
</html>

<!-- 기본 방식 (렌더링 차단) -->
<script src="app.js"></script>

<!-- async 속성 사용 (다운로드 완료 즉시 실행) -->
<script src="analytics.js" async></script>

<!-- defer 속성 사용 (DOM 로드 후 순서대로 실행) -->
<script src="app.js" defer></script>

<!-- 주요 리소스 미리 로드 -->
<link
  rel="preload"
  href="critical-font.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>
<link rel="preload" href="hero-image.jpg" as="image" />

<!-- 향후 필요한 리소스 미리 연결 설정 -->
<link rel="preconnect" href="https://api.example.com" />
<link rel="dns-prefetch" href="https://cdn.example.com" />

<!-- 사용자 상호작용 후 필요한 페이지 미리 로드 -->
<link rel="prefetch" href="next-page.html" />

/* font-display 속성 활용 */
@font-face {
  font-family: "MyCustomFont";
  src: url("my-font.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  /* swap: 폰트 로딩 중 시스템 폰트 먼저 표시 후 교체 */
  font-display: swap;
}

/* 필수 아이콘 폰트만 선택적으로 로드 */
@font-face {
  font-family: "IconFont";
  src: url("icon-font-subset.woff2") format("woff2");
  unicode-range: U+E000-E005; /* 필요한 아이콘만 포함하는 유니코드 범위 */
  font-display: block;
}

<!-- 중요 폰트 미리 로드 -->
<link
  rel="preload"
  href="my-font.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>